<template>
  <div class="absolute inset-0">
    <el-container class="h-full">
      <!-- 菜单栏 -->
      <el-aside width="200px" class="h-full">
        <main-list
          :data="mainListData"
          :indexMainList="indexMainList"
          @on-main-list="clickhandleList"
        />
      </el-aside>

      <el-main class="bg-gray-100 h-full">
        <div v-if="pageCheck">
          <!-- 总类型 -->
          <header-sekecttype
            :data="mainListData"
            :indexMainList="indexMainList"
            @on-handle-list="clickhandleList"
          />
          <!-- app卡片 -->
          <select-features :data="selectFeaturesData" @handle-item-click="appCard" />
        </div>
        <div v-else class="h-full flex bg-white rounded-md text-sm">
          <!-- 左边菜单 -->
          <div class="w-1/6 h-full flex flex-col">
            <div class="font-bold px-4 py-2.5 border-b border-r border-solid border-slate-300">
              场景模拟
            </div>
            <creation-list
              :selectedCard="selectedCard"
              :scenarioListData="scenarioListData"
              @handle-card="onCutCard"
            />
          </div>
          <!-- 中间创作 -->
          <div class="w-2/6 flex flex-col">
            <!-- 标题 -->
            <div class="font-bold px-4 py-2.5 border-b border-r border-solid border-slate-300">
              开始创作
            </div>
            <!-- 选择输入内容 -->
            <div class="flex-grow px-4 py-1 overflow-auto">
              <select-keywords ref="formData" :fields="selectKeywordsData" />
            </div>

            <!-- 底部按钮 -->
            <div class="w-full px-5 pb-5 border-t border-solid border-gray-100 relative">
              <div class="h-22.5 flex items-center">
                <el-button
                  @click="getFromData"
                  class="w-full h-10 rounded-3xl text-base"
                  color="#626aef"
                  >智能创作文案</el-button
                >
              </div>
              <div class="flex items-center text-xs text-gray-400 absolute bottom-5">
                <Icon icon="zondicons:exclamation-outline" :size="12" color="" /> 免责声明
              </div>
            </div>
          </div>
          <!-- 右边输入结果 -->
          <div class="w-3/6 flex flex-col">
            <div>
              <div class="flex justify-between items-center">
                <div class="flex">
                  <div
                    class="px-4 py-2.5 flex items-center mr-6 ml-2 hover:text-indigo-400 cursor-pointer"
                    :class="
                      tabIndex == 1
                        ? 'border-b-2 border-solid border-indigo-600 text-indigo-600'
                        : ''
                    "
                    @click="handleTab(1)"
                  >
                    <Icon :size="14" icon="fluent:add-32-filled" class="mr-1" />
                    <div> 新创作的 </div>
                  </div>
                  <div
                    class="px-4 py-2.5 flex items-center mr-6 ml-2 hover:text-indigo-400 cursor-pointer"
                    :class="
                      tabIndex == 2
                        ? 'border-b-2 border-solid border-indigo-600 text-indigo-600'
                        : ''
                    "
                    @click="handleTab(2)"
                  >
                    <Icon :size="14" icon="ion:star-outline" class="mr-1" />
                    <div> 已收藏的 </div>
                  </div>
                  <div
                    class="px-4 py-2.5 flex items-center mr-6 ml-2 hover:text-indigo-400 cursor-pointer"
                    :class="
                      tabIndex == 3
                        ? 'border-b-2 border-solid border-indigo-600 text-indigo-600'
                        : ''
                    "
                    @click="handleTab(3)"
                  >
                    <Icon :size="14" icon="radix-icons:clock" class="mr-1" />
                    <div> 历史记录 </div>
                  </div>
                </div>
                <div
                  class="mx-4 text-indigo-600 cursor-pointer hover:text-indigo-400"
                  v-show="tabIndex == 1"
                  @click="saveCreationData"
                >
                  保存
                </div>
              </div>
            </div>
            <div class="flex-grow">
              <div class="h-full overflow-auto" v-if="tabIndex == 1" ref="creationData"
                ><newlyCreated
              /></div>
              <div class="h-full" v-if="tabIndex == 2"><userCollectible /></div>
              <div class="h-full" v-if="tabIndex == 3"><userHistory /></div>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { Icon } from '@/components/Icon'
import mainList from './components/main-list.vue'
import selectFeatures from './components/select-features.vue'
import headerSekecttype from './components/header-selecttype.vue'
import creationList from './components/creation-list.vue'
import selectKeywords from './components/select-keywords.vue'
// 新创作的
import newlyCreated from './newly-created.vue'
// 已收藏的
import userCollectible from './user-collectible.vue'
// 历史记录
import userHistory from './user-history.vue'
// 切换页面
let pageCheck = ref(true)
// 主列表当前索引
let indexMainList = ref('1')

// 列表数据
const mainListData = [
  {
    id: '1',
    name: '文章创作',
    Icon: 'https://cos.kuaijingai.com/upload/work_ai/20230714/64b0fa712a5c563487.png',
    num: '96',
    arrKey: '1234'
  },
  {
    id: '2',
    name: '社交媒体',
    Icon: 'https://cos.kuaijingai.com/upload/work_ai/20230628/649be730de8d553735.png',
    num: '20',
    arrKey: '5678'
  },
  {
    id: '3',
    name: '品牌营销',
    Icon: 'https://cos.kuaijingai.com/upload/work_ai/20230714/64b0fa5e4395a37860.png',
    num: '24',
    arrKey: '9012'
  }
]

// 可供选择列表的数据
const selectFeaturesData = [
  {
    name: '写新闻稿',
    Icon: 'https://cos.kuaijingai.com/upload/work_ai/20230716/64b3723e3dccb41941.png',
    synopsis: '创作新闻 产品发布 功能上新等类型新闻稿',
    Key: '23232'
  },
  {
    name: '文章创作及改写',
    Icon: 'https://cos.kuaijingai.com/upload/work_ai/20230716/64b37232ec4c641621.png',
    synopsis: '创建新文章或者改写已有文章',
    Key: '67564'
  }
]

// 场景模拟数据
const scenarioListData = [
  {
    type: 'title',
    title: '长文章',
    key: 'title1'
  },
  {
    type: 'list',
    name: '写新闻稿',
    icon: 'https://cos.kuaijingai.com/upload/work_ai/20230716/64b3723e3dccb41941.png',
    synopsis: '创作新闻 产品发布 功能上新等类型新闻稿',
    key: '23232'
  },
  {
    type: 'list',
    name: '文章创作及改写',
    icon: 'https://cos.kuaijingai.com/upload/work_ai/20230716/64b37232ec4c641621.png',
    synopsis: '创建新文章或者改写已有文章',
    key: '67564'
  },
  {
    type: 'title',
    title: '写邮件',
    key: 'title2'
  },
  {
    type: 'list',
    name: '邮件主题',
    icon: 'https://cos.kuaijingai.com/upload/work_ai/20230716/64b373c654e4798691.png',
    synopsis: '创建吸引人的邮件主题，提高邮件打开率',
    key: '67563'
  },
  {
    type: 'list',
    name: '营销邮件',
    icon: 'https://cos.kuaijingai.com/upload/work_ai/20230716/64b373d342bd929541.png',
    synopsis: '用营销邮件加强与客户的关系',
    key: '67584'
  }
]

// 开始创作数据
const selectKeywordsData = [
  {
    key: 'app1',
    label: '内容要点',
    required: true,
    defaultValue: '',
    type: 'textarea',
    placeholder: '比如：相关关键词，简单概要'
  },
  {
    key: 'app2',
    label: '内容框架要求',
    required: false,
    defaultValue: '',
    type: 'input',
    placeholder: '生成结果要包含哪些框架内容'
  },
  {
    key: 'app3',
    label: '内容框架要求',
    required: false,
    defaultValue: '',
    type: 'input',
    placeholder: '生成结果要包含哪些框架内容'
  },
  {
    key: 'app4',
    label: '新闻稿类型',
    required: true,
    defaultValue: '',
    type: 'select',
    placeholder: '请选择内容类型',
    options: [
      {
        name: '新品发布',
        value: '新品发布'
      },
      {
        name: '产品更新',
        value: '产品更新'
      },
      {
        name: '营销活动',
        value: '营销活动'
      }
    ]
  },
  {
    key: 'app5',
    label: '面向的客户群体',
    required: false,
    defaultValue: [],
    type: 'tag',
    placeholder: '请选择客户群体'
  }
]

// 主页侧边栏交互
// 接收子组件传来的数据
const clickhandleList = (arrKey: string, id: string) => {
  pageCheck.value = true
  indexMainList.value = id
  console.log(arrKey)
}

// 选择的卡片
const selectedCard = ref<string>()
// 主页内容点击卡片
const appCard = (key) => {
  pageCheck.value = false
  selectedCard.value = key
}
// 子组件点击切换卡片
const onCutCard = (Key) => {
  selectedCard.value = Key
}

// 修改场景模拟时，切换创作内容
watch(
  () => selectedCard.value,
  () => {
    console.log(1)
  }
)

// 点击切换选择第三个模块
const tabIndex = ref(1)
const handleTab = (index) => {
  tabIndex.value = index
}
// 获取表单数据
const formData = ref()
const getFromData = () => {
  console.log(formData.value.form)
}

// 保存生成的数据
const creationData = ref()
const saveCreationData = () => {
  console.log(creationData.value)
}
</script>

<style sceep></style>
